<template>
  <div class="ip-services">
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <h2>IP检测服务配置</h2>
        </div>
      </template>
      
      <el-form ref="formRef" :model="form" label-width="150px">
        <!-- IPv4服务列表 -->
        <el-form-item label="IPv4检测服务">
          <div class="services-container">
            <div v-for="(service, index) in form.ipv4Services" :key="'ipv4-'+index" class="service-item">
              <el-input v-model="form.ipv4Services[index]" placeholder="请输入IPv4检测服务URL">
                <template #append>
                  <el-button @click="removeService('ipv4', index)" type="danger" plain>
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </template>
              </el-input>
            </div>
            <el-button @click="addService('ipv4')" type="primary" plain>
              添加IPv4服务
            </el-button>
          </div>
        </el-form-item>
        
        <!-- IPv6服务列表 -->
        <el-form-item label="IPv6检测服务">
          <div class="services-container">
            <div v-for="(service, index) in form.ipv6Services" :key="'ipv6-'+index" class="service-item">
              <el-input v-model="form.ipv6Services[index]" placeholder="请输入IPv6检测服务URL">
                <template #append>
                  <el-button @click="removeService('ipv6', index)" type="danger" plain>
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </template>
              </el-input>
            </div>
            <el-button @click="addService('ipv6')" type="primary" plain>
              添加IPv6服务
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      
      <div class="form-actions">
        <el-button type="primary" @click="saveConfig" :loading="loading">保存配置</el-button>
        <el-button @click="resetToDefault">恢复默认</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import axios from 'axios'

export default {
  name: 'IPServices',
  components: {
    Delete
  },
  setup() {
    const formRef = ref(null)
    const loading = ref(false)
    
    // 默认的IP检测服务
    const defaultIPv4Services = [
      'https://api.ipify.org',
      'https://ifconfig.me/ip',
      'https://icanhazip.com',
      'https://ipinfo.io/ip'
    ]
    
    const defaultIPv6Services = [
      'https://api6.ipify.org',
      'https://ifconfig.co/ip',
      'https://ipv6.icanhazip.com',
      'https://v6.ident.me',
      'http://v6.66666.host:66/ip',
      'https://ipv6.lookup.test-ipv6.com/ip/',
      'https://ipv6.whatismyip.com',
      'https://bot.whatismyipaddress.com'
    ]
    
    // 表单数据
    const form = reactive({
      ipv4Services: [...defaultIPv4Services],
      ipv6Services: [...defaultIPv6Services]
    })
    
    // 加载配置
    const loadConfig = async () => {
      try {
        const response = await axios.get('/api/ddns/config')
        if (response.data.success && response.data.data) {
          const config = response.data.data
          
          // 加载IPv4服务列表
          if (config.ipv4_services && config.ipv4_services.length > 0) {
            form.ipv4Services = [...config.ipv4_services]
          }
          
          // 加载IPv6服务列表
          if (config.ipv6_services && config.ipv6_services.length > 0) {
            form.ipv6Services = [...config.ipv6_services]
          }
        }
      } catch (error) {
        ElMessage.error('加载配置失败: ' + (error.response?.data?.message || error.message))
      }
    }
    
    // 添加服务
    const addService = (type) => {
      if (type === 'ipv4') {
        form.ipv4Services.push('')
      } else if (type === 'ipv6') {
        form.ipv6Services.push('')
      }
    }
    
    // 移除服务
    const removeService = (type, index) => {
      if (type === 'ipv4') {
        form.ipv4Services.splice(index, 1)
      } else if (type === 'ipv6') {
        form.ipv6Services.splice(index, 1)
      }
    }
    
    // 保存配置
    const saveConfig = async () => {
      // 验证服务URL
      const ipv4Valid = form.ipv4Services.every(url => url.trim() !== '')
      const ipv6Valid = form.ipv6Services.every(url => url.trim() !== '')
      
      if (!ipv4Valid || !ipv6Valid) {
        ElMessage.warning('请移除空的服务URL')
        return
      }
      
      loading.value = true
      try {
        // 获取当前完整配置
        const response = await axios.get('/api/ddns/config')
        if (response.data.success && response.data.data) {
          const config = response.data.data
          
          // 更新IP服务列表
          config.ipv4_services = form.ipv4Services.filter(url => url.trim() !== '')
          config.ipv6_services = form.ipv6Services.filter(url => url.trim() !== '')
          
          // 发送更新的配置
          const updateResponse = await axios.post('/api/ddns/config', config)
          if (updateResponse.data.success) {
            ElMessage.success('IP检测服务配置已保存')
          } else {
            ElMessage.error('保存配置失败: ' + updateResponse.data.message)
          }
        }
      } catch (error) {
        ElMessage.error('保存配置失败: ' + (error.response?.data?.message || error.message))
      } finally {
        loading.value = false
      }
    }
    
    // 重置为默认服务
    const resetToDefault = () => {
      form.ipv4Services = [...defaultIPv4Services]
      form.ipv6Services = [...defaultIPv6Services]
      ElMessage.success('已恢复默认IP检测服务列表')
    }
    
    onMounted(() => {
      loadConfig()
    })
    
    return {
      form,
      formRef,
      loading,
      addService,
      removeService,
      saveConfig,
      resetToDefault
    }
  }
}
</script>

<style scoped>
.ip-services {
  max-width: 800px;
  margin: 0 auto;
}

.config-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-actions {
  margin-top: 20px;
  text-align: right;
}

.services-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-item {
  display: flex;
  align-items: center;
}
</style> 